import React, { useEffect, useState, useRef, useMemo } from 'react'
import { Loading, RatingStar, BuyCart, RouterView } from 'src/components'
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import classNames from 'classnames'
import { imgBaseUrl } from 'src/config/env'
import { useSelector, useDispatch } from 'react-redux'
import { ADD_CART, REDUCE_CART, INIT_BUYCART, CLEAR_CART, RECORD_SHOPDETAIL } from 'src/redux/action-type'
import { useHistory, Link } from 'react-router-dom'
import { useQuery } from 'src/utils/hooks'
import { shopDetails, foodMenu, getRatingList, ratingScores, ratingTags } from 'src/api/getData'
import BScroll from 'better-scroll'
import routerData from './routerData';
import { getImgPath } from 'src/utils'
import './index.scss'

const Shop = () => {
    const history = useHistory();
    const query = useQuery();
    const { geohash } = useSelector(state => state);
    const { id: shopId } = query;
    const dispatch = useDispatch();
    const { latitude, longitude, cartList } = useSelector(state => state)
    const [showLoading, setShowLoading] = useState(true)//显示加载动画
    const [changeShowType, setChangeShowType] = useState('food')//切换显示商品或者评价
    const [shopDetailData, setShopDetailData] = useState({}) //商铺详情
    const [showActivities, setShowActivities] = useState(false) //是否显示活动详情
    const [menuList, setMenuList] = useState([])//食品列表
    const [menuIndex, setMenuIndex] = useState(0) //已选菜单索引值，默认为0
    const [shopListTop, setShopListTop] = useState([]) //商品列表的高度集合
    const [TitleDetailIndex, setTitleDetailIndex] = useState() //点击展示列表头部详情
    const [categoryNum, setCategoryNum] = useState([]) //商品类型右上角已加入购物车的数量
    const [totalPrice, setTotalPrice] = useState(0) //总共价格
    const [cartFoodList, setCartFoodList] = useState([]) //购物车商品列表
    const [showCartList, setShowCartList] = useState(false)//显示购物车列表
    const [receiveInCart, setReceiveInCart] = useState(false) //购物车组件下落的圆点是否到达目标位置
    const [ratingList, setRatingList] = useState() //评价列表
    const [ratingScoresData, setRatingScoresData] = useState()//评价总体分数
    const [ratingTagsList, setRatingTagsList] = useState()//评价分类列表
    const [ratingTageIndex, setRatingTageIndex] = useState(0) //评价分类索引
    const [ratingTagName, setRatingTagName] = useState('')//评论的类型
    const [loadRatings, setLoadRatings] = useState(false)//加载更多评论是显示加载组件
    const [showSpecs, setShowSpecs] = useState(false)//控制显示食品规格
    const [specsIndex, setSpecsIndex] = useState(0) //当前选中的规格索引值
    const [choosedFoods, setChoosedFoods] = useState() //当前选中视频数据
    const [showDeleteTip, setShowDeleteTip] = useState(false) //多规格商品点击减按钮，弹出提示框
    const [showMoveDot, setShowMoveDot] = useState([]) //控制下落的小圆点显示隐藏
    const [windowHeight, setWindowHeight] = useState() //屏幕的高度
    const [elLeft, setElLeft] = useState(0)//当前点击加按钮在网页中的绝对top值
    const [elBottom, setElBottom] = useState(0)//当前点击加按钮在网页中的绝对left值
    const menuFoodListRef = useRef()
    const wrapperMenuRef = useRef()
    const cartContainerRef = useRef()
    const timerRef = useRef()
    const foodBScroll = useRef()//食品列表scroll
    const ratingBScroll = useRef()//评论页Scroll
    const scrollParentRef = useRef()
    const preventRepeatRequestRef = useRef(false)// 防止多次触发数据请求
    const menuIndexChangeRef = useRef(true);//解决选中index时，scroll监听事件重复判断设置index的bug
    const menuBscroll = useRef()
    const ratingOffset = useRef(0)  //评价获取数据offset值
    // 购物车
    useEffect(() => {
        dispatch({
            type: INIT_BUYCART
        })
        setWindowHeight(window.innerHeight)
    }, [dispatch])


    useEffect(() => {
        // 获取信息
        if (latitude && longitude && shopId) {
            let arr = [
                shopDetails(shopId, latitude, longitude), //获取商铺信息
                ratingTags(shopId), //评论Tag列表
                foodMenu(shopId), //获取商铺食品列表
                getRatingList(shopId, 0),//评论列表
                ratingScores(shopId),//商铺评论详情
            ]
            Promise.all(arr).then(([res1, res2, res3, res4, res5]) => {
                setShopDetailData(res1.data)
                dispatch({
                    type: RECORD_SHOPDETAIL,
                    detail: res1.data
                })
                setRatingTagsList(res2.data)
                setMenuList(res3.data)
                setRatingList(res4.data)
                setRatingScoresData(res5.data)
                //隐藏加载动画
                setShowLoading(false)
            })
        }
    }, [latitude, longitude, shopId, dispatch])

    //showLoading变化时说明组件已经获取初始化数据，进行后续操作
    useEffect(() => {
        if (!showLoading) {

            //当滑动食品列表时，监听其scrollTop值来设置对应的食品列表标题的样式
            if (!menuFoodListRef.current || !wrapperMenuRef.current) return

            menuBscroll.current = new BScroll(wrapperMenuRef.current, {
                onclick: true,
            })

            //获取食品列表的高度，存入shopListTop
            const listArr = Array.from(menuFoodListRef.current.children[0].children);
            let shopListTopArr = []
            listArr.forEach((item, index) => {
                shopListTopArr[index] = item.offsetTop;
            });
            setShopListTop(shopListTopArr)

            foodBScroll.current = new BScroll(menuFoodListRef.current, {
                probeType: 3,
                deceleration: 0.001,
                bounce: false,
                swipeTime: 2000,
                onclick: true,
            })

            const onScroll = (pos) => {
                if (!menuIndexChangeRef.current) return
                let lastIndex = -1;
                shopListTopArr.forEach((item, index) => {
                    if (Math.abs(Math.round(pos.y)) >= item) {
                        lastIndex = index
                    }
                })
                if (lastIndex > -1) {
                    setMenuIndex(lastIndex)
                }
            }
            foodBScroll.current.on('scroll', onScroll)
            const onScrollEnd = () => {
                menuIndexChangeRef.current = true
            }
            foodBScroll.current.on('scrollEnd', onScrollEnd)
            return () => {
                foodBScroll.current.off('scroll', onScroll)
                foodBScroll.current.off('scrollEnd', onScrollEnd)
                foodBScroll.current = null;
                menuBscroll.current = null
            }
        }
    }, [showLoading])




    useEffect(() => {
        if (!showLoading) {
            /**
            * 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
            */

            let cartFoodNum = 0;
            let totalPriceCopy = 0;
            let cartFoodListArr = [];


            let newArr = [];
            let shopCart = { ...cartList[shopId] };//当前商店购物信息
            menuList.forEach((item, index) => {
                if (shopCart && shopCart[item.foods[0].category_id]) {
                    let num = 0;
                    Object.keys(shopCart[item.foods[0].category_id]).forEach(itemid => {
                        Object.keys(shopCart[item.foods[0].category_id][itemid]).forEach(foodid => {
                            let foodItem = shopCart[item.foods[0].category_id][itemid][foodid];
                            num += foodItem.num;
                            if (item.type === 1) {
                                totalPriceCopy += foodItem.num * foodItem.price;

                                if (foodItem.num > 0) {
                                    cartFoodListArr[cartFoodNum] = {};
                                    cartFoodListArr[cartFoodNum].category_id = item.foods[0].category_id;
                                    cartFoodListArr[cartFoodNum].item_id = itemid;
                                    cartFoodListArr[cartFoodNum].food_id = foodid;
                                    cartFoodListArr[cartFoodNum].num = foodItem.num;
                                    cartFoodListArr[cartFoodNum].price = foodItem.price;
                                    cartFoodListArr[cartFoodNum].name = foodItem.name;
                                    cartFoodListArr[cartFoodNum].specs = foodItem.specs;
                                    cartFoodNum++;
                                }
                            }
                        })
                    })
                    newArr[index] = num;
                } else {
                    newArr[index] = 0;
                }
            })
            setCategoryNum([...newArr])

            setCartFoodList(cartFoodListArr)
            setTotalPrice(Number(totalPriceCopy).toFixed(2))

        }
    }, [showLoading, menuList, cartList, shopId])


    useEffect(() => {
        if (cartContainerRef.current) {
            const onAnimationend = () => {
                setReceiveInCart(false)
            }
            let dom = cartContainerRef.current
            dom.addEventListener('animationend', onAnimationend)
            dom.addEventListener('webkitAnimationEnd', onAnimationend)
            return () => {
                dom.removeEventListener('animationend', onAnimationend)
                dom.removeEventListener('webkitAnimationEnd', onAnimationend)
                dom = null
            }
        }
    }, [showLoading])

    //购物车列表发生变化，没有商铺时，隐藏
    useEffect(() => {
        if (!cartFoodList.length) {
            setShowCartList(false)
        }
    }, [cartFoodList])

    // 切换到评论，滚动翻页
    useEffect(() => {
        if (changeShowType === 'rating') {
            if (!scrollParentRef.current) return
            ratingBScroll.current = new BScroll(scrollParentRef.current, {
                probeType: 3,
                deceleration: 0.003,
                bounce: false,
                swipeTime: 2000,
                onclick: true,
            });

            const onScroll = (pos) => {
                if (preventRepeatRequestRef.current) {
                    // 正在获取数据中
                    return
                }
                if (Math.abs(Math.round(pos.y)) >= Math.abs(Math.round(ratingBScroll.current.maxScrollY))) {
                    //加载更多评论
                    const loaderMoreRating = async () => {

                        setLoadRatings(true)
                        preventRepeatRequestRef.current = true
                        ratingOffset.current = ratingOffset.current + 10;

                        let ratingDate = await getRatingList(shopId, ratingOffset.current, ratingTagName);
                        setRatingList((ratingList) => [...ratingList, ...ratingDate])
                        setLoadRatings(false)
                        if (ratingDate.length >= 10) {
                            preventRepeatRequestRef.current = false
                        }
                    }
                    loaderMoreRating();
                }
            }
            ratingBScroll.current.on('scroll', onScroll)

            return () => {
                ratingBScroll.current.off('scroll', onScroll)
                ratingBScroll.current = null;
            }
        }
    }, [changeShowType, ratingTagName, shopId])


    // 刷新
    useEffect(() => {
        if (ratingBScroll.current) {
            ratingBScroll.current.refresh()
        }

    }, [ratingList])

    useEffect(() => {
        // menuIndex改变时，选中项居中
        if (!wrapperMenuRef.current || !menuBscroll.current) return
        const wrapMenuHeight = wrapperMenuRef.current.clientHeight;
        const menuList = wrapperMenuRef.current.querySelectorAll('.activity_menu');
        const el = menuList[0];
        menuBscroll.current.scrollToElement(el, 800, 0, -(wrapMenuHeight / 2 - 50));
    }, [menuIndex])

    // 公告
    const promotionInfo = useMemo(() => {
        return shopDetailData.promotion_info || '欢迎光临，用餐高峰期请提前下单，谢谢。'
    }, [shopDetailData.promotion_info])

    //配送费
    const deliveryFee = useMemo(() => {
        if (shopDetailData) {
            return shopDetailData.float_delivery_fee;
        } else {
            return null;
        }
    }, [shopDetailData])

    //还差多少元起送，为负数时显示去结算按钮
    const minimumOrderAmount = useMemo(() => {
        if (shopDetailData) {
            return shopDetailData.float_minimum_order_amount - totalPrice;
        } else {
            return null;
        }
    }, [shopDetailData, totalPrice])

    //当前商店购物信息 购物车中总共商品的数量
    const totalNum = useMemo(() => {
        let num = 0;
        cartFoodList.forEach(item => {
            num += item.num
        })
        return num
    }, [cartFoodList])


    //控制活动详情页的显示隐藏
    const showActivitiesFun = () => {
        setShowActivities(!showActivities)
    }

    //点击左侧食品列表标题，相应列表移动到最顶层
    const chooseMenu = (index) => {
        setMenuIndex(index)
        //menuIndexChange解决运动时listenScroll依然监听的bug
        menuIndexChangeRef.current = false
        if (foodBScroll.current) {
            foodBScroll.current.scrollTo(0, -shopListTop[index], 400);
        }
    }

    const showTitleDetail = (index) => {
        if (TitleDetailIndex === index) {
            setTitleDetailIndex(null)
        } else {
            setTitleDetailIndex(index)
        }
    }

    //加入购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
    const addToCart = (category_id, item_id, food_id, name, price, specs) => {
        dispatch({
            type: ADD_CART,
            shopid: shopId,
            category_id,
            item_id,
            food_id,
            name, price,
            specs
        })
    }

    //移出购物车，所需7个参数，商铺id，食品分类id，食品id，食品规格id，食品名字，食品价格，食品规格
    const removeOutCart = (category_id, item_id, food_id, name, price, specs) => {
        dispatch({
            type: REDUCE_CART,
            shopid: shopId,
            category_id,
            item_id,
            food_id,
            name,
            price,
            specs
        })
    }

    //控制购物列表是否显示
    const toggleCartList = () => {
        if (cartFoodList.length) {
            setShowCartList(!showCartList)
        }
    }

    //清除购物车
    const clearCart = () => {
        toggleCartList();
        dispatch({
            type: CLEAR_CART,
            shopid: shopId
        })
    }



    //监听圆点是否进入购物车
    const listenInCart = () => {
        if (!receiveInCart) {
            setReceiveInCart(true)
        }
    }

    //获取不同类型的评论列表
    const changeTgeIndex = async (index, name) => {
        setRatingTageIndex(index)
        setRatingTagName(name)
        ratingOffset.current = 0;
        let res = await getRatingList(shopId, ratingOffset.current, name);
        setRatingList([...res.data]);
    }



    //显示规格列表
    const showChooseList = (foods) => {
        setChoosedFoods(foods)
        toogleShowSpecs()
    }

    const toogleShowSpecs = () => {
        setShowSpecs(!showSpecs)
        setSpecsIndex(0)
    }

    //记录当前所选规格的索引值
    const chooseSpecs = (index) => {
        setSpecsIndex(index)
    }

    //多规格商品加入购物车
    const addSpecs = (choosedFoods, specsIndex) => {
        dispatch({
            ADD_CART,
            shopid: shopId,
            category_id: choosedFoods.category_id,
            item_id: choosedFoods.item_id,
            food_id: choosedFoods.specfoods[specsIndex].food_id,
            name: choosedFoods.specfoods[specsIndex].name,
            price: choosedFoods.specfoods[specsIndex].price,
            specs: choosedFoods.specifications[0].values[specsIndex],
            packing_fee: choosedFoods.specfoods[specsIndex].packing_fee,
            sku_id: choosedFoods.specfoods[specsIndex].sku_id,
            stock: choosedFoods.specfoods[specsIndex].stock
        })
        toogleShowSpecs();
    }

    //显示提示，无法减去商品
    const showReduceTip = () => {
        setShowDeleteTip(true);
        clearTimeout(timerRef.current);
        timerRef.current = setTimeout(() => {
            clearTimeout(timerRef.current);
            setShowDeleteTip(false)
        }, 3000);
    }

    //显示下落圆球
    const showMoveDotFun = (showMoveDot, elLeft, elBottom) => {
        setShowMoveDot(showMoveDot)
        setElLeft(elLeft)
        setElBottom(elBottom)
    }

    const onEnter = (el) => {
        // 开始的位置
        el.style.transform = `translate3d(0,${37 + elBottom - windowHeight}px,0)`;
        el.children[0].style.transform = `translate3d(${elLeft - 30}px,0,0)`;
        el.children[0].style.opacity = 0;
    }

    const onEntered = (el) => {
        // 结束的位置
        el.style.transform = 'translate3d(0,0,0)';
        el.style.transition = 'transform .55s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
        el.children[0].style.transform = 'translate3d(0,0,0)';
        el.children[0].style.transition = 'transform .55s linear';
        el.children[0].style.opacity = 1;
        setShowMoveDot([])
    }

    const onExited = (el) => {
        listenInCart();
    }

    const goback = () => {
        history.go(-1);
    }

    return <div className="page_shop">
        {
            !showLoading && <React.Fragment>
                <section className="shop_container">
                    <nav className="goback" onClick={goback}>
                        <svg width="4rem" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <polyline points="12,18 4,9 12,0" style={{
                                fill: 'none',
                                stroke: 'rgb(255,255,255)',
                                strokeWidth: 3
                            }} />
                        </svg>
                    </nav>
                    <header className="shop_detail_header" style={{ zIndex: showActivities ? '14' : '10' }}>
                        <div className="header_cover_img_con">
                            <img src={`${imgBaseUrl}${shopDetailData.image_path}`} className="header_cover_img" alt="" />
                        </div>
                        <section className="description_header">
                            <Link to="/shop/shopDetail" className="description_top">
                                <section className="description_left">
                                    <img src={`${imgBaseUrl}${shopDetailData.image_path}`} alt="" />
                                </section>
                                <section className="description_right">
                                    <h4 className="description_title ellipsis">{shopDetailData.name}</h4>
                                    <p className="description_text">商家配送／{shopDetailData.order_lead_time}分钟送达／配送费¥{shopDetailData.float_delivery_fee}</p>
                                    <p className="description_promotion ellipsis">公告：{promotionInfo}</p>
                                </section>
                                <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1"
                                    className="description_arrow" >
                                    <path d="M0 0 L8 7 L0 14" stroke="#fff" strokeWidth="1" fill="none" />
                                </svg>
                            </Link>
                            {
                                shopDetailData.activities.length > 0 && <footer className="description_footer" onClick={showActivitiesFun}>
                                    <p className="ellipsis">
                                        <span className="tip_icon"
                                            style={{
                                                backgroundColor: '#' + shopDetailData.activities[0].icon_color,
                                                borderColor: '#' + shopDetailData.activities[0].icon_color
                                            }}
                                        >{shopDetailData.activities[0].icon_name}</span>
                                        <span>{shopDetailData.activities[0].description}（APP专享）</span>
                                    </p>
                                    <p>{shopDetailData.activities.length}个活动</p>
                                    <svg className="footer_arrow">
                                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-left"></use>
                                    </svg>
                                </footer>
                            }
                        </section>
                    </header>

                    <CSSTransition classNames="fade" in={showActivities && shopDetailData} timeout={500} unmountOnExit>
                        <section className="activities_details">
                            <h2 className="activities_shoptitle">{shopDetailData.name}</h2>
                            <h3 className="activities_ratingstar">
                                <RatingStar rating={shopDetailData.rating}></RatingStar>
                            </h3>
                            <section className="activities_list">
                                <header className="activities_title_style"><span>优惠信息</span></header>
                                <ul>
                                    {
                                        shopDetailData.activities.map(item => {
                                            return <li key={item.id}>
                                                <span className="activities_icon" style={{ backgroundColor: '#' + item.icon_color, borderColor: '#' + item.icon_color }}>{item.icon_name}</span>
                                                <span>{item.description}（APP专享）</span>
                                            </li>
                                        })
                                    }
                                </ul>
                            </section>
                            <section className="activities_shopinfo">
                                <header className="activities_title_style"><span>商家公告</span></header>
                                <p>{promotionInfo}</p>
                            </section>
                            <svg width="60" height="60" className="close_activities" onClick={showActivitiesFun}>
                                <circle cx="30" cy="30" r="25" stroke="#555" strokeWidth="1" fill="none" />
                                <line x1="22" y1="38" x2="38" y2="22" style={{
                                    stroke: '#999',
                                    strokeWidth: 2
                                }} />
                                <line x1="22" y1="22" x2="38" y2="38" style={{
                                    stroke: '#999',
                                    strokeWidth: 2
                                }} />
                            </svg>
                        </section>
                    </CSSTransition>

                    <section className="change_show_type">
                        <div>
                            <span className={classNames({ 'activity_show': changeShowType === "food" })} onClick={() => { setChangeShowType('food') }}>商品</span>
                        </div>
                        <div>
                            <span className={classNames({ 'activity_show': changeShowType === "rating" })} onClick={() => setChangeShowType('rating')}>评价</span>
                        </div>
                    </section>

                    <CSSTransition
                        classNames="fade-choose"
                        in={changeShowType === 'food'}
                        timeout={500}
                        unmountOnExit
                    >
                        <section className="food_container">
                            <section className="menu_container">
                                <section className="menu_left" ref={wrapperMenuRef}>
                                    <ul>
                                        {
                                            menuList.map((item, index) => {
                                                return <li key={index}
                                                    className={classNames('menu_left_li ellipsis', { 'activity_menu': index === menuIndex })}
                                                    onClick={() => chooseMenu(index)}>
                                                    {
                                                        item.icon_url && <img src={getImgPath(item.icon_url)} alt="" />
                                                    }
                                                    <span>{item.name}</span>
                                                    {
                                                        !!categoryNum[index] && item.type === 1 && <span className="category_num" >{categoryNum[index]}</span>
                                                    }
                                                </li>
                                            })
                                        }
                                    </ul>
                                </section>
                                <section className="menu_right" ref={menuFoodListRef}>
                                    <ul>{
                                        menuList.map((item, index) => {
                                            return <li key={index}>
                                                <header className="menu_detail_header">
                                                    <section className="menu_detail_header_left">
                                                        <strong className="menu_item_title">{item.name}</strong>
                                                        <span className="menu_item_description">{item.description}</span>
                                                    </section>
                                                    <span className="menu_detail_header_right" onClick={() => showTitleDetail(index)}></span>
                                                    {index === TitleDetailIndex && <p className="description_tip">
                                                        <span>{item.name}</span>
                                                        {item.description}
                                                    </p>}
                                                </header>
                                                {
                                                    item.foods.map((foods, foodindex) => {
                                                        return <section key={foodindex} className="menu_detail_list">
                                                            <div className="menu_detail_link">
                                                                <Link
                                                                    to={`/shop/foodDetail?image_path=${foods.image_path}&description=${foods.description}&month_sales=${foods.month_sales}&name=${foods.name}&rating=${foods.rating}&rating_count=${foods.rating_count}&satisfy_rate=${foods.satisfy_rate}&foods=${encodeURI(JSON.stringify(foods))}&shopId=${shopId}`}

                                                                >
                                                                    <section className="menu_food_img">
                                                                        <img src={`${imgBaseUrl}${foods.image_path}`} alt="" />
                                                                    </section>
                                                                    <section className="menu_food_description">
                                                                        <h3 className="food_description_head">
                                                                            <strong className="description_foodname">{foods.name}</strong>
                                                                            {
                                                                                foods.attributes.length > 0 && <ul className="attributes_ul">
                                                                                    {
                                                                                        foods.attributes.map((attribute, foodindex) => {
                                                                                            return attribute && <li key={foodindex} style={{ color: '#' + attribute.icon_color, borderColor: '#' + attribute.icon_color }} className={classNames({ attribute_new: attribute.icon_name === '新' })}>
                                                                                                <p style={{ color: attribute.icon_name === '新' ? '#fff' : '#' + attribute.icon_color }}>{attribute.icon_name === '新' ? '新品' : attribute.icon_name}</p>
                                                                                            </li>
                                                                                        })
                                                                                    }

                                                                                </ul>
                                                                            }
                                                                        </h3>
                                                                        <p className="food_description_content">{foods.description}</p>
                                                                        <p className="food_description_sale_rating">
                                                                            <span>月售{foods.month_sales}份</span>
                                                                            <span>好评率{foods.satisfy_rate}%</span>
                                                                        </p>
                                                                        {foods.activity && <p className="food_activity">
                                                                            <span style={{ color: '#' + foods.activity.image_text_color, borderColor: '#' + foods.activity.icon_color }}>{foods.activity.image_text}</span>
                                                                        </p>}
                                                                    </section>
                                                                </Link>

                                                            </div>

                                                            <footer className="menu_detail_footer">
                                                                <section className="food_price">
                                                                    <span>¥</span>
                                                                    <span>{foods.specfoods[0].price}</span>
                                                                    {foods.specifications.length > 0 && <span>起</span>}
                                                                </section>
                                                                <BuyCart
                                                                    shopId={shopId}
                                                                    foods={foods}
                                                                    moveInCart={listenInCart}
                                                                    onShowChooseList={showChooseList}
                                                                    onShowReduceTip={showReduceTip}
                                                                    onShowMoveDot={showMoveDotFun} />
                                                            </footer>
                                                        </section>
                                                    })
                                                }
                                            </li>
                                        })
                                    }
                                    </ul>
                                </section>
                            </section>
                            <section className="buy_cart_container">
                                <section onClick={toggleCartList} className="cart_icon_num">
                                    <div className={classNames('cart_icon_container', {
                                        'cart_icon_activity': totalPrice > 0,
                                        'move_in_cart': receiveInCart
                                    })}
                                        ref={cartContainerRef}>
                                        {totalNum && <span className="cart_list_length">
                                            {totalNum}
                                        </span>}
                                        <svg className="cart_icon">
                                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-icon"></use>
                                        </svg>
                                    </div>
                                    <div className="cart_num">
                                        <div>¥ {totalPrice}</div>
                                        <div>配送费¥{deliveryFee}</div>
                                    </div>
                                </section>
                                <section className={classNames('gotopay', { gotopay_acitvity: minimumOrderAmount <= 0 })}>
                                    {minimumOrderAmount > 0 ? <span className="gotopay_button_style">还差¥{minimumOrderAmount}起送</span> :
                                        <Link to={`/confirmOrder?geohash=${geohash}&shopId=${shopId}`}
                                            className="gotopay_button_style" >去结算</Link>}
                                </section>
                            </section>
                            <CSSTransition classNames="toggle-cart" in={showCartList && cartFoodList.length > 0} timeout={500} unmountOnExit>
                                <section className="cart_food_list">
                                    <header>
                                        <h4>购物车</h4>
                                        <div onClick={clearCart}>
                                            <svg>
                                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-remove"></use>
                                            </svg>
                                            <span className="clear_cart">清空</span>
                                        </div>
                                    </header>
                                    <section className="cart_food_details">
                                        <ul>
                                            {
                                                cartFoodList.map((item, index) => {
                                                    return <li key={index} className="cart_food_li">
                                                        <div className="cart_list_num">
                                                            <p className="ellipsis">{item.name}</p>
                                                            <p className="ellipsis">{item.specs}</p>
                                                        </div>
                                                        <div className="cart_list_price">
                                                            <span>¥</span>
                                                            <span>{item.price}</span>
                                                        </div>
                                                        <section className="cart_list_control">
                                                            <span onClick={() => removeOutCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)}>
                                                                <svg>
                                                                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-minus"></use>
                                                                </svg>
                                                            </span>
                                                            <span className="cart_num">{item.num}</span>
                                                            <svg className="cart_add" onClick={() => addToCart(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)}>
                                                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-add"></use>
                                                            </svg>
                                                        </section>
                                                    </li>
                                                })
                                            }
                                        </ul>
                                    </section>
                                </section>
                            </CSSTransition>
                            <CSSTransition classNames="fade" in={showCartList && cartFoodList.length > 0} timeout={500} unmountOnExit>

                                <div className="screen_cover" onClick={toggleCartList}></div>

                            </CSSTransition>
                        </section>
                    </CSSTransition>
                    <CSSTransition
                        classNames="fade-choose"
                        in={shopDetailData && changeShowType === 'rating'}
                        timeout={500}
                        unmountOnExit
                    >
                        <section
                            className="rating_container"
                            ref={scrollParentRef}
                        >
                            <section type="2">
                                <section>
                                    <header className="rating_header">
                                        <section className="rating_header_left">
                                            <p>{shopDetailData.rating}</p>
                                            <p>综合评价</p>
                                            <p>高于周边商家{(ratingScoresData.compare_rating * 100).toFixed(1)}%</p>
                                        </section>
                                        <section className="rating_header_right">
                                            <p>
                                                <span>服务态度</span>
                                                <RatingStar rating={ratingScoresData.service_score}></RatingStar>
                                                <span className="rating_num">{ratingScoresData.service_score.toFixed(1)}</span>
                                            </p>
                                            <p>
                                                <span>菜品评价</span>
                                                <RatingStar rating={ratingScoresData.food_score}></RatingStar>
                                                <span className="rating_num">{ratingScoresData.food_score.toFixed(1)}</span>
                                            </p>
                                            <p>
                                                <span>送达时间</span>
                                                <span className="delivery_time">{shopDetailData.order_lead_time}分钟</span>
                                            </p>
                                        </section>
                                    </header>
                                    <ul className="tag_list_ul">
                                        {
                                            ratingTagsList.map((item, index) => {
                                                return <li key={index}
                                                    className={classNames({ unsatisfied: item.unsatisfied, tagActivity: ratingTageIndex === index })}
                                                    onClick={() => changeTgeIndex(index, item.name)}
                                                >{item.name}({item.count})</li>
                                            })
                                        }
                                    </ul>
                                    <ul className="rating_list_ul">
                                        {
                                            ratingList.map((item, index) => {
                                                return <li key={index} className="rating_list_li">
                                                    <img src={getImgPath(item.avatar)} className="user_avatar" alt="" />
                                                    <section className="rating_list_details">
                                                        <header>
                                                            <section className="username_star">
                                                                <p className="username">{item.username}</p>
                                                                <p className="star_desc">
                                                                    <RatingStar rating={item.rating_star}></RatingStar>
                                                                    <span className="time_spent_desc">{item.time_spent_desc}</span>
                                                                </p>
                                                            </section>
                                                            <time className="rated_at">{item.rated_at}</time>
                                                        </header>
                                                        <ul className="food_img_ul">
                                                            {
                                                                item.item_ratings.map((item, index) => {
                                                                    return <li key={index}>
                                                                        {item.image_hash && <img src={getImgPath(item.image_hash)} alt="" />}
                                                                    </li>
                                                                })
                                                            }
                                                        </ul>
                                                        <ul className="food_name_ul">
                                                            {
                                                                item.item_ratings.map((item, index) => {
                                                                    return <li key={index} className="ellipsis">
                                                                        {item.food_name}
                                                                    </li>
                                                                })
                                                            }
                                                        </ul>
                                                    </section>
                                                </li>
                                            })
                                        }
                                    </ul>
                                </section>
                            </section>
                        </section>
                    </CSSTransition>

                </section>
                <section>

                    <CSSTransition classNames="fade" in={showSpecs} timeout={500} unmountOnExit>
                        <div className="specs_cover" onClick={toogleShowSpecs}></div>
                    </CSSTransition>

                    <CSSTransition
                        classNames="fadeBounce"
                        in={showSpecs}
                        timeout={500}
                        unmountOnExit
                    >
                        <div className="specs_list">
                            <header className="specs_list_header">
                                <h4 className="ellipsis">{choosedFoods && choosedFoods.name}</h4>
                                <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1" className="specs_cancel"
                                    onClick={toogleShowSpecs}>
                                    <line x1="0" y1="0" x2="16" y2="16" stroke="#666" strokeWidth="1.2" />
                                    <line x1="0" y1="16" x2="16" y2="0" stroke="#666" strokeWidth="1.2" />
                                </svg>
                            </header>
                            <section className="specs_details">
                                <h5 className="specs_details_title">{choosedFoods && choosedFoods.specifications[0] && choosedFoods.specifications[0].name}</h5>
                                <ul>
                                    {
                                        choosedFoods && choosedFoods.specifications[0] && choosedFoods.specifications[0].values.map((item, itemIndex) => {
                                            return <li key={itemIndex}
                                                className={classNames({ specs_activity: itemIndex === specsIndex })}
                                                onClick={() => chooseSpecs(itemIndex)}>
                                                {item}
                                            </li>
                                        })
                                    }
                                </ul>
                            </section>
                            <footer className="specs_footer">
                                <div className="specs_price">
                                    <span>¥ </span>
                                    <span>{choosedFoods && choosedFoods.specfoods[specsIndex].price}</span>
                                </div>
                                <div className="specs_addto_cart" onClick={() => addSpecs(choosedFoods, specsIndex)}>加入购物车</div>
                            </footer>
                        </div>
                    </CSSTransition>

                </section>
                <CSSTransition classNames="fade" in={showDeleteTip} timeout={500} unmountOnExit>
                    <p className="show_delete_tip">多规格商品只能去购物车删除哦</p>
                </CSSTransition>
                <TransitionGroup>
                    {
                        showMoveDot.map((item, index) => {
                            return <CSSTransition
                                onEnter={onEnter}
                                onEntered={onEntered}
                                onExited={onExited}
                                key={index}
                                timeout={500}
                            // classNames="dot"
                            >
                                <span className="move_dot">
                                    <svg className="move_liner">
                                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-add"></use>
                                    </svg>
                                </span>
                            </CSSTransition>
                        })
                    }
                </TransitionGroup>
            </React.Fragment>
        }
        {
            (showLoading || loadRatings) && <Loading />
        }
        {
            showLoading && <section className="animation_opactiy shop_back_svg_container">
                <img src="/images/shop_back_svg.svg" alt="" />
            </section>
        }
        <RouterView data={routerData} />
    </div>
}

export default Shop;